import { Carousel } from 'antd-mobile';
import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
// http请求
import myaxios from '../../utils/myaxios';

class index extends Component {

  state = {
    swiper_list: [],
    imgHeight: 170,
  }
  componentDidMount() {
    myaxios.get('home/swiperdata').then(data => {
      this.setState({ swiper_list: data.message })
    })
  }

  handleSwiperClick(goods_id) {
    this.props.history.push(`/goodDetail/${goods_id}`)
  }
  render() {
    return (
      <Carousel autoplay={true} autoplayInterval={2000} infinite>
        {this.state.swiper_list.map(val => (
          <div
            onClick={this.handleSwiperClick.bind(this, val.goods_id)}
            key={val.goods_id}
            style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
          >
            <img
              src={val.image_src}
              alt=""
              style={{ width: '100%', verticalAlign: 'top' }}
              onLoad={() => {
                // fire window resize event to change height
                window.dispatchEvent(new Event('resize'));
                this.setState({ imgHeight: 'auto' });
              }}
            />
          </div>
        ))}
      </Carousel>

    )
  }
}
export default withRouter(index)

